import React, { useState,useCallback } from "react";
import VoteFooter from "./VoteFooter";
import VoteMain from "./VoteMain";
export default function Vote() {
    let [supNum, setSupNum] = useState(0),
        [oppNum, setOppNum] = useState(0);
   /*  const change = (type) => {
        if (type === 'sup') {
            setSupNum(supNum + 1)
            return
        }
        setOppNum(oppNum + 1)
    } */
    const change = useCallback((type)=>{
        if (type === 'sup') {
            setSupNum(supNum + 1)
            return
        }
        setOppNum(oppNum + 1)
    },[supNum,oppNum])//只要supNum/oppNum发生变化，就会创建新的函数
    return <div className="vote-box">
        <div className="header" style={{
            display: 'flex',
        }}>
            <h2 className="title">React是很棒的前端框架</h2>
            <span className="num" style={{
                paddingTop: 23,
                marginLeft: 56
            }}>{supNum + oppNum}</span>
        </div>
        <VoteMain supNum={supNum} oppNum={oppNum} />
        <VoteFooter change={change} />
    </div>
}
